<template>
  <div class="fourthMoney">
		<div class="one">
      <div class="bt">第一步：请将以下图片发给商户并让企业法人打开微信扫码授权</div>
      <img class="er_img" src="@/static/moneyEr.jpg" alt="">
    </div>
    <div class="two">
      <div class="bt">第二步：确认客户报备情况<el-button type="primary" size="mini" style="margin-left: 8px" @click="getwxApply">查看报备结果</el-button></div>
      <div class="success" v-if="status == 3">
        <div class="top_box">
          <img src="@/static/icon-cg.svg" alt="">
          <p class="p-1">成功</p>
        </div>
      </div>
      <div class="failure" v-if="status == 2">
        <div class="top_box">
          <img src="@/static/icon-sb.svg" alt="">
          <p class="p-1">提交失败</p>
          <p class="p-2">失败原因请联系研发人员，查看具体原因</p>
        </div>
      </div>
      <div class="success" v-if="status == 1">
        <div class="top_box">
          <img src="@/static/icon-dd.svg" alt="">
          <p class="p-1">正在等待合利宝审核</p>
          <p class="p-2">建议20～30分钟后重新获取结果</p>
        </div>
      </div>
    </div>
    <div class="three" v-if="status == 3">
      <div class="bt">第三步：请将以下链接发给商户，并告知商户查看信息后，授权同意</div>
      <div class="main">
        <div>生成合利宝电子账户鉴权协议：</div>
        <el-button type="primary" size="mini" style="margin: 0 8px" @click="lookLink">查看链接</el-button>
        <div>请先完成客户报备，再进行协议签订</div>
      </div>
      <div class="text">
        <div >{{urlText}}</div>
        <el-button type="primary" size="mini" style="margin-left: 8px" 
          v-clipboard:copy="urlText"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          v-if="linkCode"
         >复制</el-button>
        <!-- <el-button type="primary" size="mini">发送客户邮箱</el-button> -->
      </div>
    </div>
    <div class="btn"><el-button type="primary" @click="getComplete" v-if="status == 3">已全部完成</el-button></div>
  </div> 
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// import VueClipboard from 'vue-clipboard2'

//api
import {
 getwxApplyQueryStatus,
 getcreateCode,
 getComplete,
} from '@/api/moneyManagement'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    merchantNo: String,
    
  },
  data() {
    return {
      status: '',
      linkCode: '',
      urlText: '',
    }
  },
  computed: {
   
  },
  created() {

	},
  methods: {
     //微信报备接口状态
    getwxApply(){
      const merchantNo = this.merchantNo
      getwxApplyQueryStatus(merchantNo).then(res => {
        const { status } = res.result
        this.status = status
      })
      .finally(() => {
        this.loading = false
      })
    },
    lookLink(){
      const merchantNo = this.merchantNo
      getcreateCode(merchantNo).then(res => {
        this.linkCode = res.result
        this.urlText = this.$ZHONG_URL+'kongbai?code='+res.result
      })
      .finally(() => {
        this.loading = false
      })
    },
    //复制
    onCopy(e) {
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
    onError(e) {
      this.$message({
        message: '复制失败',
        type: 'success'
      });
    },
    //已全部完成
    getComplete(){
      this.$confirm(`需确认协议是否签订完成`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
				const merchantNo = this.merchantNo
        getComplete(merchantNo).then(res => {
          const {code,message} = res
          if(code == 200){
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
            })
            setTimeout(() => {
              this.$router.push({
                path: '/moneyManagement/money-list', 
              })
            }, 1000);
          }else{
            this.$message({
              message: message,
              type: 'error',
              duration: 1500,
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
      }).catch(() => {

			})
      
    },
  }
}
</script>
<style lang="scss" scoped>
@import '../style/moneyList';

</style>